<template>
    <div class="liquidCon">
      <div class="liquidBorderImg">
        <div class="itemBox">
          <div id="manChart" style="min-width:130px;min-height:130px;height:130px;color:white;"></div>
          <div class="labelText">{{totalData.list[0].name}}</div>
        </div>
        <div class="">
          <div id="womanChart" style="min-width:130px;min-height:130px;height:130px;color:white;"></div>
          <div class="labelText">{{totalData.list[1].name}}</div>
        </div>
      </div>
    </div>
</template>
<script>
import echarts from "echarts";
require("echarts-liquidfill");
export default {
  props: {
    value: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  watch: {
    value(res) {
      this.setChart(res);
    }
  },
  data() {
    return {
      totalData: {
        list: [{ name: "", value: 0 }, { name: "", value: 0 }],
        total: 0
      },
      myChart: null,
      myChart2: null,
      setInterTime: null,
      timeOut: null
    };
  },
  mounted() {
    // this.setChart();
  },
  beforeDestroy() {
    clearInterval(this.setInterTime);
    clearTimeout(this.timeOut);
  },
  methods: {
    setChart(res) {
      console.log(JSON.stringify(res));
      this.$set(this, "totalData", res);
      var self = this;
      var option = {
        title: {
          text: ""
        },
        series: [
          {
            type: "liquidFill",
            name: "总人数: " + res.total,
            color: [
              new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#29AAE1"
                }
              ]),
              new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(41,170,225,0.6)	"
                },
                {
                  offset: 1,
                  color: "rgba(41,170,225, 0.3)	"
                }
              ])
            ],
            legend: {
              show: true,
              left: "20%",
              bottom: "10%"
            },
            data: [
              {
                name: "男性占比",
                value: res.list[0].value / res.total
              },
              {
                value: res.list[0].value / res.total,
                phase: Math.PI
              }
            ],
            radius: "100%",
            shape:
              "path://M32.73,38A19,19,0,1,0,13.66,19,19,19,0,0,0,32.73,38Z,M22.87,39.52C9,43.89,0,57.18,0,71.64V94.55a2.06,2.06,0,0,0,2.06,2H13.12v27.66a1.71,1.71,0,0,0,1.72,1.7H50.77a1.71,1.71,0,0,0,1.72-1.7V96.59H61A4.59,4.59,0,0,0,65.61,92V69.6C65.61,48.92,44.12,32.79,22.87,39.52Z",

            label: {
              normal: {
                position: ["50%", "60%"],
                color: "#29AAE1",
                insideColor: "black",
                fontFamily: "DIN Condensed Bold",
                fontSize: 22,
                lineHeight: 25,
                formatter: function(params) {
                  return (
                    // "\n{a| 总库位:}{b| " +
                    // Number(res.total).toLocaleString() +
                    // "} \n {c| 库存使用率} \n\n\n" +
                    ((res.list[0].value / res.total) * 100).toFixed(2) + "%"
                  );
                },
                rich: {
                  a: {
                    color: "#29AAE1",
                    fontSize: 24
                  },
                  b: {
                    color: "#29AAE1",
                    fontSize: 26,
                    fontFamily: "DIN Condensed Bold"
                  },
                  c: {
                    color: "#29AAE1",
                    fontSize: 38,
                    fontFamily: "DIN Condensed Bold"
                  }
                }
              }
            },
            backgroundStyle: {
              color: "rgba(41,170,225,0.1)"
            },
            outline: {
              show: false
            },
            phase: 0,
            period: 4000,
            waveLength: "100%",
            animationDurationUpdate: 2000
          }
        ]
      };
      var option2 = {
        title: {
          text: ""
        },
        series: [
          {
            type: "liquidFill",
            name: "总人数: " + res.total,
            color: [
              new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(238,63,134,1)"
                },
                {
                  offset: 1,
                  color: "rgba(238,63,134, 0.6)"
                }
              ]),
              new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(238,63,134,0.6)	"
                },
                {
                  offset: 1,
                  color: "rgba(238,63,134, 0.3)	"
                }
              ])
            ],
            data: [
              {
                name: "女性占比",
                value: res.list[1].value / res.total
              },
              {
                value: res.list[1].value / res.total,
                phase: Math.PI
              }
            ],
            radius: "100%",
            shape:
              "path://M67.35,103.32A6.79,6.79,0,0,1,62,106l-9.16,0c-1.3,3.89-3.26,9.77-5,15.32A6.64,6.64,0,0,1,41.5,126H27.3a6.73,6.73,0,0,1-6.41-4.67c-1.77-5.55-3.7-11.24-5-15.13-4,0-9.16-.13-9.16-.13A6.85,6.85,0,0,1,.2,97.52L10.71,56.37c2-9.87,10.65-17.48,21-18.62a19.06,19.06,0,1,1,5.39,0,24.18,24.18,0,0,1,21.06,19L68.57,97.52A6.76,6.76,0,0,1,67.35,103.32Z",

            label: {
              normal: {
                position: ["50%", "60%"],
                color: "#EE3F86",
                insideColor: "black",
                fontFamily: "DIN Condensed Bold",
                fontSize: 22,
                lineHeight: 25,
                formatter: function(params) {
                  return (
                    // "\n{a| 总库位:}{b| " +
                    // Number(res.total).toLocaleString() +
                    // "} \n {c| 库存使用率} \n\n\n" +
                    ((res.list[1].value / res.total) * 100).toFixed(2) + "%"
                  );
                },
                rich: {
                  a: {
                    color: "#EE3F86",
                    fontSize: 24
                  },
                  b: {
                    color: "#EE3F86",
                    fontSize: 26,
                    fontFamily: "DIN Condensed Bold"
                  },
                  c: {
                    color: "#EE3F86",
                    fontSize: 38,
                    fontFamily: "DIN Condensed Bold"
                  }
                }
              }
            },
            backgroundStyle: {
              color: "rgba(238,63,134,0.1)"
            },
            outline: {
              show: false
            },
            phase: 0,
            period: 4000,
            waveLength: "100%",
            animationDurationUpdate: 2000
          }
        ]
      };

      this.timeOut = setTimeout(function() {
        self.myChart = echarts.init(document.getElementById("manChart"), null, {
          devicePixelRatio: 2
        });
        self.myChart2 = echarts.init(
          document.getElementById("womanChart"),
          null,
          {
            devicePixelRatio: 2
          }
        );
        self.myChart.setOption(option);
        self.myChart2.setOption(option2);
      }, 0);
    }
  }
};
</script>

<style lang="scss" scoped>
.liquidCon {
  display: flex;
  position: absolute;
  left: 20px;
  right: 0;
  top: 0;
  bottom: 0;
}
.labelText {
  margin-top: 10px;
  width: 100%;
  text-align: center;
  color: #29aae1;
}
.liquidBorderImg {
  display: flex;
  // position: relative;
  // margin: auto;
  // &::after {
  //   content: "";
  //   position: absolute;
  //   top: 0;
  //   right: 0;
  //   left: 0;
  //   bottom: 0;
  //   z-index: 1;
  //   background-image: url("../../../static/img/cyy/liquidBorder.png");
  //   background-size: 50% 50%;
  //   background-position: 50% 50%;
  //   background-repeat: no-repeat;
  // }
}
.liquidBorderImg .itemBox {
  margin-right: 30px;
}
</style>